{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2016, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div id="{{dialogId}}" class="reveal large max-height" data-reveal>
  <div class="reveal-body">
    <form id="reserve_form" action="">
      <div class="row">
        <h3 class="subheader">
          {{tr "Reservation from Virtual Network"}}
        </h3>
      </div>
      <div class="confirm-resources-header"></div>
      <div class="row">
        <div class="large-6 columns">
          <label for="reserve_size">{{tr "Number of addresses"}}</label>
          <input wizard_field="size" type="text" id="reserve_size"/>
        </div>
      </div>
      <div class="row">
        <div class="large-12 columns">
          <input type="radio" name="reserve_target" id="reserve_new" value="NEW"/>
          <label for="reserve_new">
            {{tr "Add to a new Virtual Network"}}
          </label>
          <input type="radio" name="reserve_target" id="reserve_add" value="ADD"/>
          <label for="reserve_add">
            {{tr "Add to an existing Reservation"}}
          </label>
        </div>
      </div>
      <div id="reserve_new_body">
        <div class="row">
          <div class="large-6 columns">
            <label for="reserve_name">{{tr "Virtual Network Name"}}</label>
            <input wizard_field="name" type="text" id="reserve_name"/>
          </div>
        </div>
      </div>
      <div id="reserve_add_body">
        {{{vnetsTableHTML}}}
      </div>
      <br>
      {{#advancedSection (tr "Advanced Options") }}
        <div class="row">
          <div class="large-12 columns">
            <p>{{tr "You can select the addresses from an specific Address Range"}}</p>
          </div>
        </div>
        <div class="row">
          <div class="large-12 columns">
            {{{arsTableHTML}}}
          </div>
        </div>
        <br>
        <div class="row">
          <div class="large-6 columns">
            <label for="reserve_addr">{{tr "First address"}}</label>
            <input wizard_field="addr" type="text" id="reserve_addr" placeholder="{{tr "IPv4 or MAC"}}"/>
          </div>
        </div>
      {{/advancedSection}}
      <div class="reveal-footer">
        <div class="form_buttons">
          <button class="button radius right success" id="submit_reserve_button" type="submit" value="Network.reserve">
            {{tr "Reserve"}}
          </button>
        </div>
      </div>
      <button class="close-button" data-close aria-label="{{tr "Close modal"}}" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </form>
  </div>
</div>
